<template>
	<search></search>
	<view class="cate">

		<!-- 左侧 -->
		<view class="left">
			<scroll-view scroll-y>
				<view class="grid" :class="{active:index===isIndex}" v-for="(item,index) in list"
					:key="item.category_id" @tap="changeGrid(index)">
					<text class="text">{{item.name}}</text>
				</view>
			</scroll-view>
		</view>
		<!-- 右侧 -->
		<view class="right">
			<scroll-view scroll-y>
				<view class="brands">
					<navigator v-for="item in subList" :key="item.category_id"
						:url="'/pages/detail/detail?id='+item.category_id">
						<image :src="item.image.external_url"></image>
						<text>{{item.name}}</text>
					</navigator>
				</view>
			</scroll-view>
		</view>
		<!-- :url="'/pages/detail-01/new_file?goodsId='+item.category_id"> -->
	</view>
</template>

<script setup>
	import search from '../../sea/search/index.vue'
	import {
		cateApi
	} from '../../apis/cate.js'
	// import {
	// 	useRouter
	// } from 'vue-router'
	import {
		ref,
		onMounted,
		computed
	} from 'vue'

	let list = ref([])
	let isIndex = ref(0)

	// }
	// 获取商品列表
	onMounted(async () => {
		const res = await cateApi()
		console.log(res)
		list.value = res.data.list
		// console.log(list.value)
	})
	//列表中有没有children
	const subList = computed(() => list.value[isIndex.value]?.children || [])
	/**
	 * 动态切换类名
	 */
	let changeGrid = (index) => {
		// console.log(index);
		isIndex.value = index
	}
</script>

<style lang="scss" scoped>
	scroll-view {
		height: 100%;
		overflow: hidden;
	}

	.active {
		color: #fa2814;
	}

	.cate {
		display: flex;
		font-size: 24rpx;
		height: 1100rpx;

	}

	.left {
		width: 150rpx;
		background-color: #f8f8f8;

	}

	.grid {
		// width: 55rpx;
		height: 80rpx;
		text-align: center;
		padding-left: 20rpx;
		padding-right: 20rpx;
		line-height: 80rpx;


	}

	.text {
		display: block;
		margin-bottom: 20rpx;
		border-bottom: 2rpx solid #e3e4e7;
	}

	.right {
		flex: 1;
		background-color: #fff;
	}

	.brands {
		display: flex;
		flex-wrap: wrap;

		navigator {
			width: 33%;
			margin-top: 40rpx;
			text-align: center;
		}

		image {
			width: 130rpx;
			height: 130rpx;
		}

		text {
			display: block;
		}
	}
</style>